<template>
	<view class="bottom-space anste-popup clearfix">
		<uni-popup ref="popup" type="bottom">
			<!-- 保费试算，要加上样式   @touchmove.stop.prevent="moveHandle"-->
			<view class="bg-white pad10 mid-content overflow-auto">
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="index-title">被保险人出生日期</view>
						<picker mode="date" @change="bindDateChange" class="ans-input pos-rel clearfix" value="1989-06-29">
							<input class="uni-input" v-model="birthday" disabled />
							<i class="pos-abs r-icon icon-rili iconfont"></i>
						</picker>
					</view>
					
					<view class="uni-form-item uni-column">
						<view class="index-title">是否有社保</view>
						<radio-group @change="radioChange_shifysb">
							<label class="uni-list-cell  uni-list-cell-pd margin5" v-for="(item, index) in shifysbList" :key="item.value">
								<view class="btn-radio fs14" :class="index===focus_shifysb?'focus':''">
									<radio v-show="false" :value="item.value" />{{item.name}}
								</view>
							</label>
						</radio-group>
					</view>
					
					<view class="uni-form-item uni-column">
						<view class="index-title">方案选择</view>
						<radio-group @change="radioChange_popup">
							<label class="uni-list-cell  uni-list-cell-pd margin5" v-for="(item, index) in chanpFangaM"
								:key="item.id">
								<view class="btn-radio fs14" :class="index===focus?'focus':''">
									<radio v-show="false" :value="item.fangadm" />{{item.fangamc}}
								</view>
							</label>
						</radio-group>
					</view>
					
					<view class="uni-form-item uni-column">
						<view class="index-title">附加保障</view>
							<scroll-view scroll-y="true" class="mid-scroll">
								<checkbox-group @change="checkboxChange" :key="key">
									<label class="uni-list-cell  uni-list-cell-pd  clearfix" v-for="item in chanpFangaF" :key="item.riskcode">
										<view class="btn-checkbox pos-rel fs16 margin10B" :class="item.select===true?'focus':''">
											<view class="font-bold margin5B">{{item.riskname}}</view>
											<view class="font-gray fs-14">
												<view v-html="item.risknode"></view>
											</view>
											<checkbox class="pos-abs r-select" :value="item.riskcode" :checked="item.checked" />
										</view>
									</label>
								</checkbox-group>
							</scroll-view>
					</view>
					<view class="clearfix h40"></view>
					<view class="clearfix footer footer-bg pad10">
						<view class="fxl footer-font-l">保费:￥{{baof}} / 年</view>
						<button class="pos-abs orange-button rad50" style="width:50%;right:20rpx;" form-type="submit">提交</button>
					</view>
				</form>
			</view>
		</uni-popup>

		<view class="pos-rel clearfix banner">
			<img :src="chanp.zhut" class="banner-img" />
			<view class="pos-abs font">{{chanp.name}}</view>
		</view>
		<view class="bg-white pad10 clearfix">
			<view class="fs12 font-gray line-hei-20">
				<view><i class="iconfont fs12 icon-renqun margin10R"></i><span>适合人群: {{chanp.shihrq}}</span></view>
				<view><i class="iconfont fs12 icon-qixian margin10R"></i><span>保险期限: {{chanp.baoxqx}}</span></view>
			</view>
		</view>

		
		
		<view class="bg-white clearfix footer-space" >
			<segmented-control :values="items" :stickyTop="0" :current="current"
				@clickItem="onClickItem"></segmented-control>
				
			<view class="clear"></view>
			<view class="list" id="list">
				<view class="clearfix bg-white" v-if="current===0">
					<view v-html="chanp.chanpjs"></view>
					<view class="clearfix h20"></view>
					<!-- 产品方案 -->
					<radio-group @change="radioChange" class="margin10L">
						<label class="uni-list-cell  uni-list-cell-pd margin5" v-for="(item, index) in chanpFangaM"
							:key="item.id">
							<view class="btn-radio wid-fixed fs14" :class="index===focus_0?'focus':''">
								<radio v-show="false" :value="item.fangadm" :checked="index === current" />
								{{item.fangamc}}
							</view>
						</label>
					</radio-group>
					
					<view class="uni-padding-wrap uni-common-mt pad10">
						<view class="uni-flex uni-row">
							<view v-html="selectFanga.baoxzr"></view>
						</view>
					</view>
					
				</view>

				<view class="clearfix" v-if="current===1">
					<view class="bg-white pad10" v-html="chanp.changjwd"></view>
					<view class="clearfix h20"></view>
				</view>
				
				<view class="clearfix pos-rel" v-if="current===2">
					<view class="bg-white pad10" v-html="chanp.toubxz"></view>
					<view class="clearfix h20"></view>
				</view>
			</view>

			<uni-section class="pub-title" title="保险责任" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub no-border">
				<uni-forms-item label="">
					<checkbox-group @change="checkbox_change">
						<view class="h30 clear wid100"></view>
						<view class="margin20L fontlink dis-block" v-for="(item, index) in baoxtkList" :key="item.id">
							<a class="margin20R" @click="openPdfDlg(item.tiaokurl)">{{item.tiaokmc}}</a> <span v-if="baoxtkList.length > index + 1">|</span>
						</view>
					</checkbox-group>
				</uni-forms-item>
			</uni-card>
			
		</view>
		<view class="footer bg-white pad10">
			<view class="orange-button rad50" @click="baofss">保费试算</view>
		</view>
	</view>
</template>

<script>
	import segmentedControl from '@/components/segmented-control';
	import html2canvas from 'html2canvas';
	import uuid from 'uuid'
	
	export default {
		components: {
			segmentedControl
		},
		
		data() {
			return {
				key: 0,
				baoxtkList: [],
				hiddenFujxlb: [],
				agentCode: null,
				agentId: null,
				focus_0: 0,
				chanpdm: null,
				shifysb: 1,
				baof: 0,
				fujxlb: [],
				focus_shifysb: 0,
				shifysbList: [
					{
						value: '1',
						name: '是',
						checked: 'true'
					},
					{
						value: '0',
						name: '否'
					}
				],
				birthday: "",
				focus: 0,
				selectFanga: {},
				chanp: {},
				chanpFangaM: [],
				chanpFangaF: [],

				items: [{
						title: '产品详情',
						tabWidth: '33.3%'
					},
					{
						title: '常见问答',
						tabWidth: '33.3%'
					},
					{
						title: '投保需知',
						tabWidth: '33.3%'
					}
				],
				current: 0

			}
		},

		onShow: function() {
			let that = this
			
			if(this.$refs.popup)
				this.$refs.popup.close()
			
			this.birthday = ""
			this.shifysb = 1
			this.baof = 0
			this.focus_shifysb = 0
			this.focus_0 = 0
			this.focus = 0

			uni.request({
				url: getApp().globalData.baseUrl + "/getChanP",
				data: {
					code: this.chanpdm
				},
				success: (res) => {
					if (res.data.success) {
						that.chanp = res.data.result
						that.getFangA(that.chanp.code)
					}
				}
			});

			
		},

		onLoad(option) {
			let that = this
			
			this.agentCode = option.agentCode
			this.agentCode = "agent81867"
			this.agentId = option.agentId
			this.chanpdm = option.code

			// alert(option.agentCode + "\t" + option.agentId);

			uni.request({
				url: getApp().globalData.baseUrl + "/getBaoxtk",
				data: {
					chanpdm: this.chanpdm
				},
				success: (res) => {
					if (res.data.success) {
						that.baoxtkList = res.data.result
					}
				}
			});

			// 可回溯uuid
			uni.setStorage({
				key: 'kehs_uuid',
				data: uuid.v1(),
				success: function () {
					console.log('kehs_uuid success');
				}
			});
		},

		methods: {
			openPdfDlg(pdfUrl) {
				// uni.navigateTo({
				// 	url: '../simtanc/simtanc?url=' + pdfUrl
				// });
				location.href = pdfUrl
			},

			// 计算保费
			jisbf() {
				let that = this
				let inputData = {
					chanpName: this.chanp.name,
					birthday: this.birthday,
					shifysb: this.shifysb,
					chanpCode: this.chanpdm,
					fangaCode: this.selectFanga.fangadm,
					fujxlb: this.fujxlb,
					agentCode: this.agentCode,
					agentId: this.agentId,
				}

				uni.showLoading({
					title: '计算中...'
				});
				uni.request({
					url: getApp().globalData.baseUrl + "/jisbf",
					data: inputData,
					success: (res) => {
						uni.hideLoading()

						if (res.data.success) {
							that.baof = res.data.result
							inputData.baof = that.baof

							// 存储方案和附加险，供后面的页面使用
							uni.setStorage({
								key: 'baofxg',
								data: inputData,
								success: function () {
									console.log('success');
								}
							});
						}
					}
				});

			},

			checkBirthday() {
				if(this.birthday == "") {
					uni.showModal({
						title: '提示',
						content: "请选择出生日期!",
						showCancel: false
					})
					
					return false
				}
				
				return true
			},

			dataURItoBlob(dataURI) {
				var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
				var byteString = atob(dataURI.split(',')[1]); //base64 解码
				var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
				var intArray = new Uint8Array(arrayBuffer); //创建视图

				for (var i = 0; i < byteString.length; i++) {
					intArray[i] = byteString.charCodeAt(i);
				}
				return new Blob([intArray], {type: mimeString});
			},

			blobToDataURI(blob, callback) {
				var reader = new FileReader();
				reader.onload = function (e) {
					callback(e.target.result);
				}
				reader.readAsDataURL(blob);
			},


			formSubmit: function(e) {
				let that = this

				/*
				// 截屏传到后台
				html2canvas(document.body, {
					useCORS: true, 
					allowTaint: false, 
					windowWidth: document.body.scrollWidth, 
					windowHeight: document.body.scrollHeight,
					scale: 1}).then(function(canvas) {

					canvas.toBlob(function(blob) {
						that.blobToDataURI(blob, function (base64) {
							uni.request({
								url: getApp().globalData.baseUrl + "/kehsjl",
								method: "POST",
								data: {uuid: 1, type: 2, jiep: "<img src=\"" + base64 + "\"/>"},
								success: (res) => {
									console.log(res)
								}
							})
						});
					});
				});
				*/

				if(!this.checkBirthday())
					return;

				uni.navigateTo({
				    url: '../kehsjltx/kehsjltx'
				});
			},
			
			formReset: function(e) {
				console.log('清空数据')
			},
			
			// 附加险列表
			checkboxChange: function (e) {
				let that = this
				// 特需住院医疗保险金HTA16，恶性肿瘤特需医疗保险金HTA14。互斥
				
				if(e.detail.value.indexOf("HTA16") > -1 && e.detail.value.indexOf("HTA14") > -1) {
					uni.showModal({
						title: '提示',
						content: "特需住院医疗保险金，恶性肿瘤特需医疗保险金。只能二选一!",
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								let tmp = that.chanpFangaF
								that.chanpFangaF.forEach((item, idx) => {
									if(item.riskcode == "HTA16" || item.riskcode == "HTA14") {
										item.checked = false
										// that.chanpFangaF.splice(idx, 1, item)
									}
								})
								// 刷新控件
								that.key++
								that.baof = 0
								that.fujxlb = []

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})

					return
				}

				this.fujxlb = e.detail.value;

				this.hiddenFujxlb.forEach(riskcode => {
					this.fujxlb.push(riskcode)
				})

				if(this.checkBirthday())
					this.jisbf()
			},

			bindDateChange: function(e) {
				this.birthday = e.target.value
				this.jisbf()
			},

			// 方案选择
			radioChange: function(evt) {
				this.chanpFangaM.forEach((item, idx) => {
					if (item.fangadm == evt.target.value) {
						this.selectFanga = item;
						this.focus_0 = idx
						
						return false
					}
				})
			},
			
			// 方案选择弹窗
			radioChange_popup: function(evt) {
				// 清空附加险checkboxgroup列表
				this.chanpFangaF = []
				this.fujxlb = []

				this.chanpFangaM.forEach((item, idx) => {
					if (item.fangadm == evt.target.value) {
						this.selectFanga = item;
						this.getFujX(this.selectFanga.fangadm, "M")
						this.getFujX(this.selectFanga.fangadm, "F")

						this.focus = idx
						
						return false
					}
				})

				

				if(this.checkBirthday())
					this.jisbf()
			},
			
			// 是否有社保
			radioChange_shifysb: function(evt) {
				this.shifysb = evt.target.value

				for (let i = 0; i < this.shifysbList.length; i++) {
					if (this.shifysbList[i].value === evt.target.value) {
						this.focus_shifysb = i;
						break;
					}
				}

				if(this.checkBirthday())
					this.jisbf()
			},

			getFangA(chanpCode) {
				let that = this

				uni.request({
					url: getApp().globalData.baseUrl + "/getFangA",
					data: {
						chanpCode: chanpCode
					},
					success: (res) => {
						that.chanpFangaM = res.data.result
						if(that.chanpFangaM != null && that.chanpFangaM.length > 0) {
							that.selectFanga = that.chanpFangaM[0]
							this.getFujX(that.selectFanga.fangadm, "M")
							this.getFujX(that.selectFanga.fangadm, "F")
						}
					}
				});
			},

			getFujX(fangaCode, mf) {
				let that = this

				uni.request({
					url: getApp().globalData.baseUrl + "/getFujX",
					data: {
						fangaCode: fangaCode,
						mf: mf
					},
					success: (res) => {
						if(mf == "M") {
							// 必选的险种
							that.hiddenFujxlb = []
							// 可选和必选都放这里
							that.fujxlb = []
							res.data.result.forEach(item => {
								that.hiddenFujxlb.push(item.riskcode)
								that.fujxlb.push(item.riskcode)
							})
						}

						if(mf == "F")
							that.chanpFangaF = res.data.result
					}
				});
			},

			/**
			 * 点击segmentedControl 事件回调
			 */
			onClickItem(index) {
				if (this.current !== index)
					this.current = index
				
				if(index == 0) {
					uni.pageScrollTo({
					    scrollTop: 0,
					    duration: 300
					});
				}
			},

			baofss() {
				this.$refs.popup.open()
			}

		}
	}
</script>

<style scoped>
	.segmented-control .segmented-control-item {
		width: 33.3% imporant;
	}

	.index-title {
		font-size: 32rpx;
		font-weight: bold;padding:20rpx 0rpx 10rpx 0rpx;
	}

	.fontlink {
		font-size: 32rpx;
		color: #0894ec;
	}

	.font01 {
		font-size: 26rpx;
		padding: 30rpx 0rpx;
		display: block;
		color: #333;
	}

	.intro {
		font-size: 20rpx;
		color: #999;
	}

	a {
		color: #0894ec;
	}

	.know {
		right: 30rpx;
		top: 30rpx;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #C9C9C9;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-se {
		color: #5BA7FF;
		border-bottom: 4upx solid #5BA7FF;
	}

	

	.orange-font {
		font-size: 36rpx;
		font-weight: bold;
		color: #494df4;
		padding-left: 10rpx;
	}
	.mid-content{padding-bottom:100rpx !important}

	
	
	.mid-scroll{height:400rpx;}
	.banner .font{bottom:10rpx;left:0px;right:0px;padding:10rpx;color:#ffff;font-weight:normal;background:rgba(0,0,0,.2)}
	.banner {background:#fff;}
	.banner .banner-img{width:100%;}
	.r-icon{right:10rpx;top:10rpx;font-size:40rpx;color:#777;}
	
</style>
	
